/**
  * @file 显示部门 线索显示公共资源池
  * @author hj
  * @date 2017-12-14
  */
<template>
    <div>
      <header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" v-text="(dept.params.source == 'customer' ? '客户分配' : '线索分配') + '-选择部门'"></h1>
        <a class="mui-btn mui-btn-link mui-pull-right" @tap="saveConfirm()">确定</a>
      </header>
      <div class="mui-content">
        <div class="mui-scroll-wrapper" :style="wraCss">
          <div class="mui-scroll">
            <div class="dept_li">
              <ul v-if="dept.params.source == 'clue'" class="mui-table-view">
                <li class="mui-table-view-cell">
                  <span @tap.stop="checkFn({})" class="mui-icon" :class="{'crm-circle' : dept.deptData.selectId, 'crm-solid-check' : !dept.deptData.selectId, 'checked' : !dept.deptData.selectId}"></span>
                  <p class="na" v-text="'公共资源池'"></p>
                </li>
              </ul>
              <div class="list_is_null" v-if="!dept.deptData.lists || dept.deptData.lists.length == 0"></div>
              <ul class="list mui-table-view" v-if="dept.deptData.lists && dept.deptData.lists.length > 0" style="margin-top: 5px;">
                <li class="mui-table-view-cell" v-for="item in dept.deptData.lists" @tap="toPersonFn(item)">
                  <!-- 自己所在的部门不能选 -->
                  <span @tap.stop="checkFn(item)" v-if="!item.isOwner" class="mui-icon" :class="{'crm-circle' : dept.deptData.selectId != item.deptId, 'crm-solid-check' : dept.deptData.selectId == item.deptId, 'checked' : dept.deptData.selectId == item.deptId}"></span>
                  <p class="na" v-text="item.name"></p>
                  <p v-text="item.describeName" v-if="item.describeName"></p>
                  <span class="mui-icon arrows"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<style lang='less' rel='stylesheet.less'>
  .dept_li ul , .dept_li p {
    margin: 0;
    padding: 0;
  }
  .dept_li li {
    min-height: 46px;
    position: relative;
  }
  .dept_li li > span {
    position: absolute;
    top: 0;
    left: 10px;
    width: 40px;
    text-align: center;
    height: 46px;
    line-height: 46px;
    color: #777;
  }
  .dept_li li > span.checked {
    color: #d61518;
  }
  .dept_li li > span.arrows {
    top: 50%;
    left: inherit;
    right: 8px;
    font-size: 16px;
    margin-top: -23px;
    text-align: right;
  }
  .dept_li li > span.arrows:after {
    content: '\A126';
  }
  .dept_li li > p {
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 40px;
    font-size: 12px;
    color: #777;
  }
  .dept_li li > p.na {
    font-size: 13px;
    color: #333;
  }
</style>
<script>
  import store from './distribution-store.js';
  var nativeApi = require('nativeApi');
  export default {
    data: function () {
      return {
        dept: store.state,
        wraCss: {
          top: '44px',
          bottom: '0'
        }
      };
    },
    methods: {
      back: function () {
        history.go(-1);
      },
      toPersonFn: function (item) {
        // 跳转人员列表
        var self = this;
        store.getPersonList(item.deptId, function () {
          self.$router.go('/distributionPersonPage');
        });
      },
      checkFn: function (item) {
        this.dept.deptData.selectId = item.deptId || '';
        this.dept.deptData.name = item.name || '';
      },
      saveConfirm: function () {
        store.distributionFn('dept');
      }
    },
    created: function () {},
    route: {
      data: function () {
        console.log(this.$route.params);
        store.getdDeptList(this.$route.params);
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
    }
  };
</script>
